<template>
  <ul id="Tabbar" v-show="visible" class="tabbar">
    <router-link
      tag="li"
      :to="{path:item.path}"
      :key="index"
      v-for="(item,index) in tabBarList"
      :class="[item.class,{ 'is-selected':item.path ===tab || item.alias===tab}]">
      <i></i>
      <p>{{item.title}}</p>
    </router-link>
  </ul>
</template>
<script>
  export default {
    name: 'Tabbar',
    computed: {
      visible() {
        return ['/home', '/category', '/cart', '/self', '/'].indexOf(this.$route.path) !== -1;
      },
      tab() {
        return this.$route.path
      }
    },
    data() {
      return {
        tabBarList: [
          {path: '/home', alias: '/', title: '首页', class: 'tabbar-home'},
          {path: '/category', title: '分类', class: 'tabbar-category'},
          {path: '/cart', title: '购物车', class: 'tabbar-cart'},
          {path: '/self', title: '个人中心', class: 'tabbar-self'},
        ]
      }
    },
  }
</script>
